import React, {useMemo, useState} from 'react';
import {AppstoreOutlined, UserOutlined} from '@ant-design/icons';
import type {MenuProps} from 'antd';
import {Menu} from 'antd';
import UserList from './pages/user';
import TaskList from "./pages/task";
import SyncList from "./pages/sync";
import {Space} from "antd";
import {Layout} from "antd";
import {theme} from "antd";

const items: MenuProps['items'] = [
    {
        label: '用户管理',
        key: 'user',
        icon: <UserOutlined/>,
    },
    {
        label: '任务管理',
        key: 'task',
        icon: <AppstoreOutlined/>
    },{
        label: '同步',
        key: 'sync',
        icon: <UserOutlined/>,
    },
];


const {Header, Footer, Sider, Content} = Layout;

const headerStyle: React.CSSProperties = {
    position: 'sticky',
    top: 0,
    zIndex: 1,
    width: '100%',
    display: 'flex',
    alignItems: 'center',
};

const contentStyle: React.CSSProperties = {
    textAlign: 'center',
    minHeight: 200,
    lineHeight: '120px',
    padding: '0 50px',
    color: '#fff',
};

const footerStyle: React.CSSProperties = {
    textAlign: 'center',
};


const App: React.FC = () => {
    const {
        token: {colorBgContainer},
    } = theme.useToken();

    const [currentKey, setCurrentKey] = useState('');

    const onClick: MenuProps['onClick'] = (e) => {
        console.log('click ', e);
        setCurrentKey(e.key);
    };

    return (
        <Space direction="vertical" style={{width: '100%', height: '100%'}} size={[0, 48]}>
            <Layout>
                <Header style={headerStyle}>
                    <Menu theme="dark"
                          onClick={onClick} selectedKeys={[currentKey]} mode="horizontal" items={items}/>
                </Header>
                <Content style={contentStyle} className="site-layout">
                    <div style={{padding: 24, minHeight: 380, background: colorBgContainer}}>
                        {useMemo(() => {
                            return (currentKey === 'user' && <UserList key={'user'}/>)
                        }, [currentKey])}
                        {useMemo(() => {
                            return (currentKey === 'task' && <TaskList key={'task'}/>)
                        }, [currentKey])}
                        {useMemo(() => {
                            return (currentKey === 'sync' && <SyncList key={'sync'}/>)
                        }, [currentKey])}
                    </div>
                </Content>
                <Footer style={footerStyle}>Powered by&nbsp;<strong>隔壁老中医</strong></Footer>
            </Layout>

        </Space>
    );
};

export default App;
